<template>
  <div style="width:100%;height:100%;overflow:hidden;">
    <canvas id="mainCanvas"></canvas>
    <div class="taggingData"
      style="float:right;width:389px;height:calc(100% - 20px);padding:0 10px 20px 0;border-left:1px solid #e7e7e7;overflow-y:auto;">
      <el-tabs v-model="activeTab" type="card" @tab-click="handleTab">
        <el-tab-pane label="所有数据" name="all" style="overflow-y:auto;">
          <div v-show="!showDataDetail">
            <p>总计标注：{{taggingData.length}}个</p>
            <div v-for="(item,key) in taggingData" :key="item.objid" style="padding:8px 10px;">
              <span @mouseover="highLight(item.objid)" @mouseout="cancelHighLight" style="cursor: pointer;">{{item.title}}</span>
              <el-button @click="showDetail(item.objid)" icon="el-icon-edit" style="float:right;" size="small"></el-button>
            </div>
          </div>
          <el-page-header @back="showDataDetail = !showDataDetail" v-show="showDataDetail" content="标注详情"></el-page-header>
          <div style="padding:0 5px;" v-show="showDataDetail">
            <el-form label-position="top" :model="detailData">
              <el-form-item label="类型">
                <span
                  style="padding:0 0 0 20px;">{{detailData.type == null ? "" : (detailData.type == 1 ? "矩形框标注" : detailData.type == 2 ? "圆形标注" : "标点标注")}}</span>
              </el-form-item>
              <el-form-item label="颜色">
                <span style="padding:0 0 0 20px;"><span style="padding:0 10px;" :style="{background:detailData.color}"></span>
                  {{detailData.color}}</span>
              </el-form-item>
              <el-form-item label="线条宽度">
                <span style="padding:0 0 0 20px;">{{detailData.width}}px</span>
              </el-form-item>
              <el-form-item label="点位">
                <p style="padding:0 0 0 20px;margin:0 0;">{{detailData.points}}</p>
              </el-form-item>
               <el-form-item label="标题">
                <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="请输入内容" style="padding:0 5px;" v-model="detailData.title">
                </el-input>
              </el-form-item>
              <el-form-item label="中文医药注释：">
                <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="请输入内容" style="padding:0 5px;" v-model="detailData.zhcn">
                </el-input>
              </el-form-item>
              <el-form-item label="藏语医药注释">
                <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="请输入内容" style="padding:0 5px;" v-model="detailData.zy">
                </el-input>
              </el-form-item>
              <el-form-item style="padding:10px 20px">
                <el-button type="primary" @click="submitData(detailData)">保存</el-button>
                <el-button type="danger" @click="deleteData(detailData.objid)">删除</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <el-tab-pane label="临时数据" name="temp" style="overflow-y:auto;">
          <p v-if="tempData.type == 'none'">暂无临时标注，请在左侧工具栏选择工具进行标注</p>
          <div v-else style="padding:0 5px;">
            <el-form label-position="top" :model="tempData">
              <el-form-item label="类型">
                <span
                  style="padding:0 0 0 20px;">{{tempData.type == "none" ? "" : (tempData.type == "rect" ? "矩形框标注" : tempData.type == "round" ? "圆形标注" : "标点标注")}}</span>
              </el-form-item>
              <el-form-item label="颜色">
                <span style="padding:0 0 0 20px;"><span style="padding:0 10px;" :style="{background:tempData.data.color}"></span>
                  {{tempData.data.color}}</span>
              </el-form-item>
              <el-form-item label="线条宽度">
                <span style="padding:0 0 0 20px;">{{tempData.data.width}}px</span>
              </el-form-item>
              <el-form-item label="点位">
                <p style="padding:0 0 0 20px;margin:0 0;">{{tempData.data.position}}</p>
              </el-form-item>
              <el-form-item label="标题">
                <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="请输入内容" style="padding:0 5px;"
                  v-model="tempData.data.title">
                </el-input>
              </el-form-item>
              <el-form-item label="简体中文">
                <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="请输入内容" style="padding:0 5px;"
                  v-model="tempData.data.zhcn">
                </el-input>
              </el-form-item>
              <el-form-item label="藏文">
                <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="请输入内容" style="padding:0 5px;" v-model="tempData.data.zy">
                </el-input>
              </el-form-item>
              <el-form-item style="padding:10px 20px">
                <el-button type="primary" @click="submitTempData">保存</el-button>
                <el-button type="danger" @click="deleteTempData">删除</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
import view from "@/utils/graph/view"
import { createTaggingData, deleteTaggingData,editTaggingData } from "@/api/front/tagging"
import { getTaggingMsgByObjid } from "@/api/front/tag"
export default {
  data() {
    return {
      view: null,
      activeTab: 'all',
      tempData: {
        type: 'none',
        data: {}
      },
      taggingData: [],
      showDataDetail: false,
      detailData: {}
    }
  },
  computed: {

  },
  props: {
    toolType: {
      default: 0,
      type: Number
    },
    color: {
      default: 'rgba(5, 158, 234, 1)',
      type: String
    },
    lineWidth: {
      default: 2,
      type: Number
    }
  },
  created() {
    getTaggingMsgByObjid({ objid: this.$route.query.objid }, (res) => {
      if (res.code == 200) {
        Object.keys(res.data.taggingData).forEach((key) => {
          res.data.taggingData[key].map((item) => {
            item.points = JSON.parse(item.points)
            this.taggingData.push(item)
          })
        })
        this.taggingData.sort((a, b) => {
          return a.createdT < b.createdT;
        })
      }
    })
  },
  mounted() {
    this.view = new view("mainCanvas", this.$route.query.objid, { color: this.color, width: this.lineWidth })
  },
  methods: {
    //base64图片
    getBase64Img(){
      let x = this.view.canvasToBase64();
      window.console.log(x)
    },
    changeToolType(type) {
      this.view.changeToolType(type)
    },
    handleTab(tab, event) {
      this.activeTab = tab.name
    },
    //创建新点位
    submitTempData() {
      if (this.tempData.data.id) {
        if (this.tempData.data.zhcn || this.tempData.data.zy) {
          let param = {
            tagid: this.$route.query.objid,
            type: this.tempData.type == "rect" ? 1 : (this.tempData.type == "round" ? 2 : (this.tempData.type == "polygon" ? 3 : 0)),
            color: this.tempData.data.color,
            width: this.tempData.data.width,
            points: JSON.stringify(this.tempData.data.positionP),
            zhcn: this.tempData.data.zhcn || "",
            zy: this.tempData.data.zy || "",
            title:this.tempData.data.title || "",
          };
          createTaggingData(param, (res) => {
            if (res.code == 200) {
              this.view.tempTaggingToData(this.tempData.data.id, this.tempData.type, res.data);
              res.data.points = JSON.parse(res.data.points)
              this.taggingData.unshift(res.data)
            }
          }, true);
        }
        else {
          this.$message("标注信息中的简体中文与藏文至少填写一项")
        }
      }
    },
    //删除临时点位
    deleteTempData() {
      if (this.tempData.data.id) {
        this.view.deleteTempData(this.tempData.data.id, this.tempData.type)
        this.tempData.type = "none"
      }
    },
    //高亮显示
    highLight(id) {
      this.view.showHighLight(id)
    },
    //取消高亮
    cancelHighLight(){
      this.view.cancelHighLight()
    },
    //恢复至默认自适应宽高
    fixToAutoWH() {
      if (this.view) {
        this.view.fixToAutoWH();
      }
    },
    //显示详细信息
    showDetail(id){
      this.detailData = {}
      this.taggingData.map((item) => {
        if (item.objid == id) {
          this.detailData = item
        }
      })
      this.showDataDetail = !this.showDataDetail
    },
    //删除正式数据
    deleteData(objid){
      deleteTaggingData({objid:objid}, (res) => {
        if(res.code == 200){
          this.taggingData = this.taggingData.filter(item => item.objid != objid)
          this.view.deleteTaggingData(objid)
          this.showDataDetail = !this.showDataDetail
        }
      }, true)
    },
    //更新标注数据
    submitData(item){
      editTaggingData(item, (res) => {
        if(res.code == 200){
          this.taggingData.map((data) => {
            if(data.objid == item.objid){
              data = res.data
            }
          })
        }
      }, true)
    },
    //获取base64图
    getBase64(){
      if(this.view){
        return this.view.canvasToBase64();
      }
      else{
        return "";
      }
    }
  },
  watch: {
    //切换标注工具
    toolType: {
      handler(val) {
        this.changeToolType(val)
      }
    },
    "view.tempIds": {
      handler: function (val, oldVal) {
        if (oldVal) {
          if (oldVal.rect && val.rect && oldVal.rect == val.rect) {
            this.activeTab = "temp"
            this.tempData.type = "rect"
            this.tempData.data = this.view.getTempDataById(val.rect, "rect");
          }
          else if (oldVal.round && val.round && oldVal.round == val.round) {
            this.activeTab = "temp"
            this.tempData.type = "round"
            this.tempData.data = this.view.getTempDataById(val.round, "round");
          } else if (oldVal.polygon && val.polygon && oldVal.polygon == val.polygon) {
            this.activeTab = "temp"
            this.tempData.type = "polygon"
            this.tempData.data = this.view.getTempDataById(val.polygon, "polygon");
          }
        }
      },
      deep: true,
      immediate: false
    },
    lineWidth: {
      handler(val) {
        if (this.view) {
          this.view.resetTaggingConfig({ width: val })
        }
      },
      immediate: true
    },
    color: {
      handler(val) {
        if (this.view) {
          this.view.resetTaggingConfig({ color: val })
        }
      },
      immediate: true
    }
  },
  beforeDestroy(){
    if(this.view){
      this.view.deleteInterval();
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-form-item {
  margin-bottom: 0px;
}
/deep/ .el-form-item__label {
  line-height: 30px;
  padding-bottom: 0;
}
</style>